import React from 'react'
import {Button,Layout, Menu,Input, Space,Modal,Form } from 'antd';
import { useState } from 'react';
const { Header } = Layout;
import { AudioOutlined } from '@ant-design/icons';
import { } from 'antd';
const { Search } = Input;

export default function MyHeader() {
  const items1 = [
    { key: '0', label: '发现音乐' },
    { key: '1', label: '我的音乐' },
    { key: '2', label: '关注' },
    { key: '3', label: '商城' },
    { key: '4', label: '音乐人' },
    { key: '5', label: '下载客户端' }
  ]
  const onSearch = (value) => console.log(value);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  
const onFinish = (values) => {
  console.log('Success:', values);
  setIsModalOpen(false);
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
  setIsModalOpen(false);
};
  return (
    
    <Header
      style={{ height: '88px', backgroundColor: "#242424", display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
      <div className="logo" />
      <img src='../../..//assets/images/wangyiyunLogo.png' alt="" style={{ width: 176, height: 69 }} />
      <Menu
        style={{ height: '88px', lineHeight: '88px', backgroundColor: "#242424" }}
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['2']}
        items={items1}
      />
    
       <Search
      placeholder="音乐/视频/电台/用户"
      onSearch={onSearch}
      allowClear
      style={{
        width: 200,
        borderRadius:16
      }}
      
    />

    <Button shape="round" onClick={showModal}>立即登录</Button>

    <Modal title="登录" open={isModalOpen} onOk={onFinish} onCancel={onFinishFailed}>
    <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="用户名"
      name="用户名"
      rules={[{ required: true, message: '请输入用户名' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="密码"
      name="密码"
      rules={[{ required: true, message: '请输入密码!' }]}
    >
      <Input.Password />
    </Form.Item>
  </Form>
    </Modal>
    </Header>
  )
}
